<template>
    <div>
        <!--v-show 和 v-if
            v-show 通过显示隐藏的时候 操作css样式display:none 来控制 开关 频繁dom操作
            v-if 通过创建和销毁dom元素 来控制开关 频繁dom操作 逻辑判断

            v-show="vue 变量"
            v-if="vue 变量"
            v-else="vue 变量"
            v-else-if="vue 变量"
        -->
           <p v-show="isShow">显示关闭</p>
           <p v-if="isShow">逻辑判断</p>
           <button @click="oneShow">点击切换</button>
           <div>
            <p v-if="age >= 18">我成年了</p>
            <p v-else-if="age >= 16">我已受到法律监护</p>
            <p v-else>未成年</p>
           </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(true)
const age = ref(17)
const oneShow = () => { 
    isShow.value = !isShow.value
}
</script>

<style  scoped>

</style>